<script>
import { computed, defineComponent, reactive, ref } from 'vue'
import * as Antd from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'

export default defineComponent({
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  emits: ['close', 'result'],
  setup(props, context) {
    let info = computed(() => {
      return props.info
    })

    let form_config = [
      {
        key: 'name',
        initValue: info.value.name || null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '文件名称' },
        attr: {
          allowClear: true,
          placeholder: '文件名称',
        },
        rule: [
          {
            required: true,
            message: '请输入文件名称',
          },
          {
            max: 20,
            message: '文件名称长度最大20个字符',
          },
        ],
      },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })

    let cancelHandler = () => {
      context.emit('close')
    }
    let loading = ref(false)
    let submitHandler = () => {
      form_ref.value.validate().then(() => {
        loading.value = true
        context.emit('result', {
          ...form_state.data,
          callBack: (_r) => {
            loading.value = false
            if (_r.code == 0) {
              context.emit('close')
            }
          },
        })
      })
    }
    let form_ref = ref()
    return {
      info,
      form_state,
      form_config,
      cancelHandler,
      submitHandler,
      form_ref,
      loading,
    }
  },
  render() {
    return (
      <Antd.Row>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            formConfig={this.form_config}
            value={this.form_state.data}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={this.submitHandler}
              loading={this.loading}
            >
              确定
            </Antd.Button>
            <Antd.Button
              type="primary"
              danger
              onClick={this.cancelHandler}
              loading={this.loading}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
